<template>
    <div class="Box">
        <div class="Title">
            江苏省人社厅技能大赛
            <div class="judgeOperation">
                <div class="judge" @click="isLogout"></div>
                <div v-if="islogout" @click="logout" class="logout">退出</div>
                <span class="judgeName">裁判001</span>
            </div>
        </div>
        <div class="contentBox">
            <div class="content" v-if="!isCreatePaper && !check">
                <div class="gamesBox">
                    <div class="game">
                        <div class="gameTitle">
                            <div class="bluebox"></div>
                            <h2>江苏省汽车维修技能大赛选拔赛-职工组</h2>
                        </div>
                        <span class="gameTime">
                            2024-08-31 10：30:00 至 2024-08-31 10：30:00
                        </span>
                        <div class="entrepreneur">
                            <div>主办单位：江苏省汽车工程协会、苏州市汽车职业发展协会</div>
                            <div>承办单位：江苏省苏州市职业大学、江苏省苏州市职业大学、江苏省苏州市职业大学</div>
                            <div>协办单位：南京信息职业技术学院、南京工业职业技术职业学院、南京信息职业技术学院</div>
                            <div>技术支持：苏州市学有所教信息科技有限公司</div>
                        </div>
                        <div class="handleBtn">
                            <button>组卷</button>
                            <button>编辑</button>
                            <button>提交</button>
                            <button>详情</button>
                        </div>
                    </div>

                    <div class="game"></div>
                    <div class="game"></div>
                    <div class="game"></div>
                </div>
            </div>
            <PanelPaper v-if="isCreatePaper"></PanelPaper>
            <CompetitionResults v-if="check"></CompetitionResults>
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router'
import PanelPaper from './PanelPaper.vue'
import CompetitionResults from './CompetitionResults.vue'
const isCreatePaper = ref(true)
const check = ref(false)
const router = useRouter()
const islogout = ref(false)
function isLogout() {
    islogout.value = !islogout.value
}
function logout() {
    islogout.value = false
    router.push('/')
}
</script>
<style scoped>
.logout {
    width: 68px;
    height: 36px;
    line-height: 36px;
    background-color: #4e5969;
    color: #ffffff;
    position: absolute;
    top: 77px;
    right: 132px;
    font-size: 20px;
    text-align: center;
    border-radius: 5px;
}

.Box {
    width: 100%;
    height: 100%;
    background-color: #f5f5f5;
}

.Title {
    width: 1920px;
    height: 80px;
    line-height: 80px;
    font-size: 32px;
    background: rgba(255, 255, 255, 1);
    padding-left: 40px;
    padding-right: 21px;
    letter-spacing: 3px;
    display: flex;
    margin-bottom: 29px;
    box-shadow: 0px 6.03px 15.08px rgba(78, 89, 105, 0.06);
}

.judgeOperation {
    margin-left: auto;
    display: flex;
}

.judge {
    width: 54px;
    height: 54px;
    background-image: url('/public/images/裁判.png');
    background-size: cover;
    background-repeat: no-repeat;
    margin-top: 13px;
}

.judgeName {
    font-size: 24px;
    margin: 0 10px;
}

.contentBox {
    width: 100%;
    height: 100%;
    background-color: #f6f7f9;
}

.content {
    width: 1880px;
    height: 820px;
    overflow-y: scroll;
    margin-left: 30px;
}

.content::-webkit-scrollbar {
    width: 8px;
    height: 1px;
}

.content::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background: #cccccc;
}

.gamesBox {
    width: 1860px;
    height: 880px;
    position: relative;
}

.game {
    width: 1860px;
    height: 270px;
    margin-bottom: 35px;
    background-color: #ffffff;
    border-radius: 10px;
    padding: 30px 0 32px 40px;
}

.gameTitle {
    font-size: 16px;
    display: flex;
    line-height: 30px;
}

.bluebox {
    width: 4px;
    height: 24px;
    background-color: #4080ff;
    margin-right: 7px;
    margin-top: 4px;
}

.gameTime {
    font-size: 16px;
    margin-left: 10px;
}

.entrepreneur {
    margin-left: 10px;
    font-size: 16px;
    margin-top: 21px;
}
.handleBtn {
    position: absolute;
    top: 23.65px;
    right: 21px;
}
.handleBtn > button {
    width: 120px;
    height: 44px;
    line-height: 44px;
    text-align: center;
    border: none;
    outline: none;
    color: #ffffff;
    font-size: 20px;
    background-color: #4080ff ;
    border-radius: 5px;
    margin-left: 11px;
}
</style>